<template>
	<div :class="curClassName" :style="curStyle">
		<!-- 直接内容类型 -->
		<template v-if="Object.is(contentType, 'RAW')">
			<template v-if="Object.is(renderMode, 'TEXT')">
				<span :style="contentStyle">{{ content }}</span>
			</template>
			<template v-else-if="Object.is(renderMode, 'HEADING1')">
				<h1 :style="contentStyle">{{ content }}</h1>
			</template>
			<template v-else-if="Object.is(renderMode, 'HEADING2')">
				<h2 :style="contentStyle">{{ content }}</h2>
			</template>
			<template v-else-if="Object.is(renderMode, 'HEADING3')">
				<h3 :style="contentStyle">{{ content }}</h3>
			</template>
			<template v-else-if="Object.is(renderMode, 'HEADING4')">
				<h4 :style="contentStyle">{{ content }}</h4>
			</template>
			<template v-else-if="Object.is(renderMode, 'HEADING5')">
				<h5 :style="contentStyle">{{ content }}</h5>
			</template>
			<template v-else-if="Object.is(renderMode, 'HEADING6')">
				<h6 :style="contentStyle">{{ content }}</h6>
			</template>
			<template v-else-if="Object.is(renderMode, 'PARAGRAPH')">
				<p :style="contentStyle">{{ content }}</p>
			</template>
		</template>
		<!-- 图片类型 -->
		<template v-else-if="Object.is(contentType, 'IMAGE')">
			<img :style="contentStyle" v-if="imagePath" :src="imagePath" />
			<i :style="contentStyle" v-else :class="cssClass"></i>
		</template>
		<!-- HTML类型 -->
		<template v-else-if="Object.is(contentType, 'HTML')">
			<div :style="contentStyle" v-html="content" />
		</template>
		<!-- MARKDOWN类型 -->
		<template v-else-if="Object.is(contentType, 'MARKDOWN')">
			MARKDOWN暂未支持
			<!-- <app-markdown-editor :style="contentStyle" mode="PREVIEWONLY" :itemValue="value"></app-markdown-editor> -->
		</template>
	</div>
</template>
<script setup lang="ts">
import { PresetTextProps } from './preset-text';

const props = defineProps(PresetTextProps);

/**
 * 项名称
 *
 * @memberof AppPresetText
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 图片路径
 *
 * @memberof AppPresetText
 */
const imagePath = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		let imagePath = '';
		if (layoutModel.sysImage) {
			imagePath = layoutModel.sysImage.imagePath;
		}
		return imagePath;
	}
});

/**
 * 图标
 *
 * @memberof AppPresetText
 */
const cssClass = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		let cssClass = '';
		if (layoutModel.sysImage) {
			cssClass = layoutModel.sysImage.iconcls;
		}
		return cssClass;
	}
});

/**
 * 内容类型
 *
 * @memberof AppPresetText
 */
const contentType = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.contentType || 'RAW';
	}
});

/**
 * 绘制模式
 *
 * @memberof AppPresetText
 */
const renderMode = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.renderMode == 'TEXT_DYNAMIC'
			? 'TEXT'
			: layoutModel.renderMode;
	}
});

/**
 * 当前容器样式类
 *
 * @memberof AppPresetText
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return `app-preset-text app-preset-text--${contentType.value.toLowerCase()} ${
			itemName.value
		} ${layoutModel.sysCss || ''}`;
	}
});

/**
 * 当前容器样式
 *
 * @memberof AppPresetText
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 内容
 *
 * @memberof AppPresetText
 */
const content = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	let content = props.value;
	if (
		layoutModel &&
		layoutModel.predefinedType &&
		layoutModel.predefinedType !== 'FIELD_TEXT_DYNAMIC'
	) {
		if (contentType.value == 'RAW') {
			content = layoutModel.rawContent;
		} else if (contentType.value == 'HTML') {
			content = layoutModel.htmlContent;
			const items = content.match(/\{{(.+?)\}}/g);
			if (items) {
				items.forEach((item: string) => {
					content = content.replace(
						/\{{(.+?)\}}/,
						eval(item.substring(2, item.length - 2))
					);
				});
			}
			content = content.replaceAll('&lt;', '<');
			content = content.replaceAll('&gt;', '>');
			content = content.replaceAll('&amp;nbsp;', ' ');
			content = content.replaceAll('&nbsp;', ' ');
		}
	}
	return content;
});

/**
 * 内容样式
 *
 * @memberof AppPresetText
 */
const contentStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		let contentStyle = layoutModel.contentStyle;
		if (layoutModel.predefinedType === 'STATIC_LABEL') {
			contentStyle +=
				'white-space: nowrap;overflow: hidden;text-overflow: ellipsis;';
		}
		return contentStyle;
	}
});
</script>
